<script lang="ts">
/**
 * Author:刘敏
 * Date:2022-09-15
 * Description:应用主页面
 */
import { defineComponent } from 'vue'
import UsePinia from "@/components/use.pinia.vue"
export default defineComponent({
  components: {
    UsePinia
  },
  methods: {
    onRouteClick(url: string) {
      this.$router.push(url)
    },
  },
  setup() {

    return {

    }
  }
})
</script>
<template>
  <div class="main-app">
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/list">分类</a></li>
        <li><a href="/detail">详情</a></li>
        <li><a href="/topic">专题</a></li>
      </ul>
    </nav>
    <router-view class="router-view"></router-view>
    <use-pinia></use-pinia>
  </div>
</template>
<style lang="less">
#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  margin-top: 20px;
}
</style>
<style lang="less" scoped>
.main-app {
  nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;

    ul {
      width: 100%;
      height: 100%;
    }

    li {
      display: inline-block;
      margin: 0 10px;
      line-height: 60px;
      cursor: pointer;

      &:hover {
        color: red;
      }
    }
  }

  .router-view {
    margin-top: 100px;
  }
}
</style>
